<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="m.178hui.com"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/transaction.css?v=1"/>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="main">
    <div class="title">
        <!--<div class="left_return" onClick="javascript :history.back(-1);"><img src="img/lefticon.png"/></div>-->
        <h3>行情</h3>
    </div>
    <div id="app"><!-- 数据列表 -->

    </div>
    <div class="pagebtn">加载更多</div>
</div>
<script>
    $(function () {
        var pageNums = 1
        ajax_data(pageNums);
        $(".pagebtn").click(function () {
            pageNums++
            ajax_data(pageNums);
            // console.log(pageNums)
        })

        function ajax_data(pages) {
            var api='https://shop.nainaiwang.com/product'
            var pageSize = 20
            $.ajax({
                'url': api + "/productOffer/statByCateName",
                'type': 'get',
                'data': {pageNum: pages, pageSize: pageSize, id: ""},
                'datatype': 'json',
                success: function (res) {
                    console.log(pages)
                    var str = ""//拼接的所有内容
                    var strfour = ""//差价
                    var prolist = res.data.list//获取数据的数组
                    //console.log(prolist)
                    if (prolist != "") {
                        $.each(prolist, function (idx, val) {
                            var attribute = ""//属性
                            //判断数据是否大于0

                            if(val.price_diff!=null){
                                if (val.price_diff >=0) {
                                // console.log(prolist)
                                strfour = "<div class='tran_four'><b class='rise'>" + val.current_price + "</b><img src='img/upicon.png'></img></div>"
                                } else if (val.price_diff < 0) {
                                    strfour = "<div class='tran_four'><b class='drop'>" + val.current_price  + "</b><img src='img/downicon.png'></img></div>"
                                }
                            }else{
                                strfour = "<div class='tran_four'><b class='rise'>" + val.current_price + "</b><img src='img/upicon.png'></img></div>"
                            }
                            
                            //属性拼接内容
                             if (val.productAttribute != null) {
                                 var attributeList = val.productAttribute.attributes
                                 $.each(attributeList, function (proaId, pro) {
                                    attribute += "<div class='parameter'><span>"+pro.name+"："+pro.value+"</span></div>"
                                 })
                             }
                            //拼接数据列表
                            str += "<div class='tranlist'><a href='trandetails.html?pages=" + pages + "&termporaryName=" + val.cate_name
                                + "'><div class='tran_top'><div class='tran_text'><b class='tran_name'>"
                                + val.cate_name + "</b></div><div class='tran_sales'>销售量："
                                + val.total_num + val.unit + "</div></div><div class='tran_three'><div class='jy_bt'>最新价格</div><div class='max_price'>最高价：￥"
                                + val.max_price + "/<span class='unit'>" + val.unit + " </span></div></div><div class='tran_three'>"
                                + strfour + "<div class='min_price'>最低价：￥"
                                + val.min_price + "/<span class='unit'>" + val.unit + "</span></div></div><div class='tran_two'>" + attribute + "</div></a></div>"
                        })

                        $("#app").append(str)
                        //$(".tran_two").append()
                    }
                }
            })
        }
    })

</script>
</body>
</html>
